<template>
  <NuxtLayout name="admin" menuActive="/admin/information">
    <div class="info">
      <div class="info_tips">机构基础信息</div>
      <div class="info_row">
        <label class="info_row_label">机构名称</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" :value="mechanismData.fullName" :disabled="true" placeholder="请输入机构名称" />
        </div>
        <label class="info_row_label">机构简称</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" v-model="mechanismData.shortName" placeholder="请输入机构简称" />
        </div>
      </div>
      <div class="info_row">
        <label class="info_row_label">机构电话</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" v-model="mechanismData.servicePhone" maxlength="11"
            placeholder="请输入机构电话" />
        </div>
        <label class="info_row_label">联系人</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" v-model="mechanismData.contactName" placeholder="请输入联系人" />
        </div>
        <label class="info_row_label">邮箱地址</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" v-model="mechanismData.email" placeholder="请输入邮箱地址" />
        </div>
      </div>
      <div class="info_row">
        <label class="info_row_label">机构地址</label>
        <div class="info_row_inline">
          <input class="info_row_inline_input" type="text" v-model="mechanismData.address" placeholder="请输入机构地址" />
        </div>
      </div>
      <div class="info_row">
        <label class="info_row_label">机构简介</label>
        <div class="info_row_inline">
          <textarea class="info_row_inline_textarea" v-model="mechanismData.brief" rows="5"
            placeholder="请输入机构简介"></textarea>
        </div>
      </div>
      <div class="info_row">
        <label class="info_row_label">营业执照</label>
        <div class="info_row_inline upload">
          <div class="upload_image" v-show="mechanismData.license">
            <el-image :src="mechanismData.license" :preview-src-list="[mechanismData.license]" fit="cover"
              style="width: 100%;height: 100%;"></el-image>
          </div>
          <el-upload action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
            :auto-upload="true" :show-file-list="false"
            :on-success="handleAvatarSuccess" class="upload_btn">
            <el-icon :size="28" color="#D6D6D6">
              <Plus />
            </el-icon>
            <div class="upload_btn_tips">上传营业执照</div>
          </el-upload>
        </div>
      </div>
      <!-- <div class="info_row">
        <label class="info_row_label">证书背景图</label>
        <div class="info_row_inline upload">
          <div class="upload_image" v-show="mechanismData.certBackImg">
            <el-image :src="mechanismData.certBackImg" :preview-src-list="[mechanismData.certBackImg]" fit="cover"
              style="width: 100%;height: 100%;"></el-image>
          </div>
          <el-upload action="https://edu.dzyxzx.cn/api/upload" name="files" accept="image/*"
            :auto-upload="true" :show-file-list="false"
            :on-success="certificateUploadSuccess" class="upload_btn">
            <el-icon :size="28" color="#D6D6D6">
              <Plus />
            </el-icon>
            <div class="upload_btn_tips">上传证书背景图</div>
          </el-upload>
        </div>
      </div> -->
      <div class="info_row">
        <label class="info_row_label">签名图</label>
        <div class="info_row_inline upload">
          <div class="upload_image" v-show="mechanismData.signImg">
            <el-image :src="mechanismData.signImg" :preview-src-list="[mechanismData.signImg]" fit="cover"
              style="width: 100%;height: 100%;"></el-image>
          </div>
          <el-upload action="https://edu.dzyxzx.cn/api/upload" name="files" accept=".png"
            :auto-upload="true" :show-file-list="false"
            :on-success="sginUploadSuccess" class="upload_btn">
            <el-icon :size="28" color="#D6D6D6">
              <Plus />
            </el-icon>
            <div class="upload_btn_tips">上传签名图</div>
          </el-upload>
        </div>
      </div>
      <div class="info_row">
        <label class="info_row_label">机构印章</label>
        <div class="info_row_inline upload">
          <div class="upload_image" v-show="mechanismData.stampImg">
            <el-image :src="mechanismData.stampImg" :preview-src-list="[mechanismData.stampImg]" fit="cover"
              style="width: 100%;height: 100%;"></el-image>
          </div>
          <el-upload action="https://edu.dzyxzx.cn/api/upload" name="files" accept=".png"
            :auto-upload="true" :show-file-list="false"
            :on-success="sealUploadSuccess" class="upload_btn">
            <el-icon :size="28" color="#D6D6D6">
              <Plus />
            </el-icon>
            <div class="upload_btn_tips">上传机构印章</div>
          </el-upload>
        </div>
      </div>
      <div class="info_tips">开设科目</div>
      <div class="info_row">
        <label class="info_row_label">&nbsp;</label>
        <div class="info_row_inline">
          <el-tree class="my-tree" node-key="id" :data="subjectData" :default-checked-keys="mechanismData.subjectIds" :default-expanded-keys="mechanismData.subjectIds" :render-after-expand="false" show-checkbox @check-change="subjectChangeFn" ref="treeRef" />
        </div>
      </div>
      <button class="info_save" hover-class="none" :disabled="saveDisabled" @click="saveFn">保存设置</button>
    </div>
  </NuxtLayout>
</template>

<script setup>
import { Plus } from '@element-plus/icons-vue'
import { treeFn } from '~/utils/utils'
import { getQuestionListApi, updateInstitutionInfo } from '~/server/api'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_机构信息",
  keywords: "技考邦,机构信息",
  description: "技考邦，机构信息。",
  ogTitle: "技考邦_机构信息",
  ogDescription: "技考邦，机构信息。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
});
const route = useRoute();
const mechanismData = ref(route.meta.mechanism ? route.meta.mechanism : {})
let subjectData = ref([]);
let saveDisabled = ref(false);
const treeRef = ref(null);
// 获取科目
useAsyncData('subject', () => useServerRequest(getQuestionListApi, {
  method: 'post',
  body: JSON.stringify({
    pageNum: 1,
    pageSize: 500,
    courseOpen: true,
    exerciseOpen: true
  })
})).then(({ data }) => {
  if (data.value && data.value.errno === 0) {
    subjectData.value = treeFn(data.value.result.list, 0, []);
  }
})
// 选择科目
const subjectChangeFn = (data, checked) => {
  if (checked) {
    mechanismData.value.subjectIds.push(data.id)
  } else {
    mechanismData.value.subjectIds.forEach((item, index) => {
      if (item === data.id) {
        mechanismData.value.subjectIds.splice(index, 1)
      }
    })
  }
}
// 上传营业执照
const handleAvatarSuccess = (res, uploadFile) => {
  if (res.errno === 0) {
    mechanismData.value.license = res.result[0];
    return false;
  }
}
// 上传证书背景图
const certificateUploadSuccess = (res, uploadFile) => {
  if (res.errno === 0) {
    mechanismData.value.certBackImg = res.result[0];
    return false;
  }
}
// 上传签名图
const sginUploadSuccess = (res) => {
  if (res.errno === 0) {
    mechanismData.value.signImg = res.result[0];
    return false;
  }
}
// 上传机构印章
const sealUploadSuccess = (res, uploadFile) => {
  if (res.errno === 0) {
    mechanismData.value.stampImg = res.result[0];
    return false;
  }
}
// 修改
const saveFn = () => {
  if (!/^1[3456789]\d{9}$/.test(mechanismData.value.servicePhone)) {
    ElMessage.warning('机构电话有误')
    return false
  }
  saveDisabled.value = true;
  useServerRequest(updateInstitutionInfo, {
    method: 'post',
    body: JSON.stringify(mechanismData.value)
  }).then(({ errno, errmsg, result }) => {
    if (errno === 0) {
      ElMessage({
        message: '保存成功',
        type: 'success'
      })
      setTimeout(() => {
        saveDisabled.value = false;
      }, 1000)
      return false;
    }
    saveDisabled.value = false;
  }).catch(err => {
    saveDisabled.value = false;
  })
}
// 更新后
onUpdated(() => {
  // 设置目前选中的节点
  if (treeRef.value && mechanismData.value.subjectIds) {
    treeRef.value?.setCheckedKeys(mechanismData.value.subjectIds, true)
  } else {
    treeRef.value?.setCheckedKeys([], false)
  }
})
</script>

<style lang="less">
.my-tree {
  .el-tree-node__content {
    padding: 5px 0;
    box-sizing: content-box;
  }

  .is-focusable .el-tree-node__content {
    background-color: transparent;
  }

  .el-tree-node__label {
    font-size: 14px;
  }
}

.upload_btn {
  width: 160px;
  height: 160px;
  background: #FFFFFF;
  border-radius: 3px;
  border: 1px solid #D6D6D6;
  cursor: pointer;

  .el-upload {
    width: 100%;
    height: 100%;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;

    .upload_btn_tips {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #D6D6D6;
      margin-top: 10px;
    }
  }
}
</style>
<style lang="less" scoped>
.info {
  background-color: #fff;
  border: 1px solid #EEEEEE;
  border-radius: 10px;
  padding-bottom: 31px;

  &_save {
    width: 250px;
    height: 42px;
    line-height: 42px;
    background: #2C6EFF;
    border-radius: 5px;
    border: 0;
    font-size: 14px;
    color: #FFFFFF;
    margin: 0 auto;
    display: block;
  }

  &_tips {
    font-weight: bold;
    font-size: 16px;
    color: #333333;
    padding: 41px 31px 0;
    margin-bottom: 35px;
  }

  &_row {
    display: flex;
    align-items: center;
    padding: 0 31px;
    margin-bottom: 20px;

    &_label {
      width: 71px;
      font-size: 14px;
      color: #333333;
      text-align: right;
      margin-right: 11px;
    }

    &_inline {
      flex: 1;
      overflow: hidden;

      &_input {
        width: 100%;
        background: #FFFFFF;
        border-radius: 3px;
        border: 1px solid #D6D6D6;
        height: 38px;
        padding: 0 11px;
        font-size: 14px;

        &[disabled] {
          background: #ECECEC;
          border-color: #ECECEC;
        }
      }

      &_textarea {
        background: #FFFFFF;
        border-radius: 3px;
        border: 1px solid #D6D6D6;
        padding: 11px;
        font-size: 14px;
        width: 100%;
      }

      &.upload {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .upload_image {
          width: 160px;
          height: 160px;
          border-radius: 3px;
          border: 1px solid #D6D6D6;
          background-color: #FFF;
          margin-right: 20px;
          overflow: hidden;
        }
      }
    }
  }
}
</style>